<template>
  <div class="rwu">
    <Gerzhox/>
    <div class="usertask">
      <div class="mb10 clearfix center_box">
        <div class="center_tt">我的特权
          <span class="line"><s class="l_5"></s></span>
        </div>
        <div class="comm_bd">
          <div class="clearfix center_tab" id="at_tab">
                 <a href="javascript:;" class="current" title="消费特权">消费特权</a>
          </div>
          <div class="specialbox">
            <dl>
              <dt><i class="tqico coupons" style=" background-position: -135px -154px;"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd class="imginfo"><strong>20元</strong>优惠券</dd>
              <dd><p class="receive"><strong>3383774</strong>已领取</p></dd>
              <dd>
               <p>
              <a href="#" class="comm_btn btn getBtn" ticket_type="exclusive" style="margin-left:25px;float:left;">立即参与</a>
               <a href="#" style="float:left;margin-left:10px;line-height:28px;color:#1994eb;" target="_blank">查看我的优惠券</a>
             </p>
             </dd>
            </dl>
            <dl>
              <i class="tqico weekly"></i>
               <dt><i class="tqico coupons" style="background-position: -358px -158px"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd><p class="imginfo">心悦成长值<strong>+20</strong>聚豆<strong>+20</strong></p></dd>
              <dd><p class="receive"><strong>2457066</strong>已领取</p></dd>
              <dd><p><a href="javascript:;" class="comm_btn btn graybtn">未达成</a></p></dd>
            </dl>
              <dl>
              <i class="tqico month"></i>
               <dt><i class="tqico coupons" style="background-position: -358px -158px"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd><p class="imginfo">心悦成长值<strong>+20</strong>聚豆<strong>+20</strong></p></dd>
              <dd><p class="receive"><strong>2457066</strong>已领取</p></dd>
              <dd><p><a href="javascript:;" class="comm_btn btn graybtn">未达成</a></p></dd>
            </dl>
                <dl>
              <i class="tqico twentyg"></i>
               <dt><i class="tqico djgift" style="background-position: -585px -156px;"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd><p class="imginfo">心悦成长值<strong>+35</strong>聚豆<strong>+35</strong></p></dd>
              <dd><p class="receive"><strong>360835</strong>已领取</p></dd>
              <dd><p><a href="javascript:;" class="comm_btn btn graybtn">未达成</a></p></dd>
            </dl>
                 <dl>
              <i class="tqico fortyg"></i>
               <dt><i class="tqico djgift" style="background-position: -585px -156px;"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd><p class="imginfo">心悦成长值<strong>+40</strong>聚豆<strong>+40</strong></p></dd>
              <dd><p class="receive"><strong>132411</strong>已领取</p></dd>
              <dd><p><a href="javascript:;" class="comm_btn btn graybtn">未达成</a></p></dd>
            </dl>
                <dl>
              <i class="tqico sixthg"></i>
               <dt><i class="tqico djgift" style="background-position: -585px -156px;"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd><p class="imginfo">心悦成长值<strong>+45</strong>聚豆<strong>+45</strong></p></dd>
              <dd><p class="receive"><strong>63387</strong>已领取</p></dd>
              <dd><p><a href="javascript:;" class="comm_btn btn graybtn">未达成</a></p></dd>
            </dl>
          </div>
        </div>
      </div>
        <div class="mb10 clearfix center_box">
        <div class="comm_bd">
          <div class="clearfix center_tab" id="at_tab">
                 <a href="javascript:;" class="current" title="消费特权">成长特权</a>
          </div>
           <div class="specialbox">
            <dl>
              <i class="tqico yuan30"></i>
               <dt><i class="tqico consume" style="background-position: -818px -154px;"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd><p class="imginfo">心悦成长值<strong>+5</strong>聚豆<strong>+5</strong></p></dd>
              <dd><p class="receive"><strong>1828995</strong>已领取</p></dd>
              <dd><p><a href="javascript:;" class="comm_btn btn graybtn">未达成</a></p></dd>
            </dl>
            <dl>
              <i class="tqico yuan80"></i>
               <dt><i class="tqico coupons" style="background-position: -358px -158px"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd><p class="imginfo">心悦成长值<strong>+10</strong>聚豆<strong>+10</strong></p></dd>
              <dd><p class="receive"><strong>1465448</strong>已领取</p></dd>
              <dd><p><a href="javascript:;" class="comm_btn btn graybtn">未达成</a></p></dd>
            </dl>
              <dl>
             <i class="tqico yuan200"></i>
               <dt><i class="tqico coupons" style="background-position: -358px -158px"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd><p class="imginfo">心悦成长值<strong>+15</strong>聚豆<strong>+15</strong></p></dd>
              <dd><p class="receive"><strong>987471</strong>已领取</p></dd>
              <dd><p><a href="javascript:;" class="comm_btn btn graybtn">未达成</a></p></dd>
            </dl>
                <dl>
              <i class="tqico yuan1000"></i>
               <dt><i class="tqico djgift" style="background-position: -585px -156px;"></i></dt>
              <dd><p class="imgtip">专享优惠券</p></dd>
              <dd><p class="imginfo">心悦成长值<strong>+20</strong>聚豆<strong>+20</strong></p></dd>
              <dd><p class="receive"><strong>237158</strong>已领取</p></dd>
              <dd><p><a href="javascript:;" class="comm_btn btn graybtn">未达成</a></p></dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Gerzhox from '@/views/commodity/gerzhox'
export default {
  components: { Gerzhox },
  name: 'personal',
  mounted () {
    this.$store.dispatch('cart/getCartList')
  }
}
</script>

<style lang="scss" scoped>
.rwu {
  a{
    text-decoration: none;
  }
  .center_info {
    padding: 15px 30px;
    border: 1px solid #e6e9ef;
    background: #fff;
    border: 1px solid #e6e9ef;
    background: #fff;
    margin-bottom: 10px;
    .loading {
      display: table;
      width: 100%;
      height: 100%;
      background: #fff;
      .loadmsg {
        display: table-cell;
        display: block;
        vertical-align: middle;
        text-align: center;
        background: url(//daoju.qq.com/becombine/mall/images/loading.gif)
          no-repeat center center;
        padding-top: 110px;
      }
    }
  }
  .usertask {
    width: 948px;
    min-height: 255px;
    height: auto;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e6e9ef;
    .mb10 {
    margin-bottom: 10px;
    }
    .center_box {
        padding: 15px 20px 20px 20px;
     a.btn {
    width: 90px;
    height: 25px;
    line-height: 26px;
    overflow: hidden;
    display: block;
    margin-top: 2px;
}
    }
    .center_tt {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
    .line {
    display: block;
    background: #e6e9ef;
    height: 1px;
    overflow: hidden;
    margin-top: 5px;
    s {
      width: 72px;
    display: block;
    background: #f74a4a;
    height: 1px;
    overflow: hidden;
    }
    }
    }
    .comm_bd {
    border: 1px solid #e6e9ef;
    background: #fff;
    .center_tab {
    border-bottom: 1px solid #e6e9ef;
    height: 44px;
    a {
    float: left;
    width: 130px;
    height: 44px;
    font-size: 14px;
    line-height: 44px;
    text-align: center;
    border-right: 1px solid #e6e9ef;
    color: #3a3f4a;
    }
    a.current {
          border-bottom: 1px solid #f74a4a;
      }
    }
    .specialbox {
    padding: 20px 50px;
    width: 810px;
    height: 512px;
    .comm_btn {
    display: inline-block;
    background: #f74a4a;
    color: #fff;
    border-bottom: 2px solid #e43333;
    text-align: center;
    cursor: pointer;
}
    dl {
    width: 220px;
    height: 236px;
    float: left;
    margin-right: 50px;
    margin-bottom: 30px;
    position: relative;
        a.btn {
        margin: 0 auto;
    }
    .imginfo {
    width: 210px;
    height: 38px;
    overflow: hidden;
    font-size: 14px;
    color: #3a3f4a;
    text-align: left;
    border: 1px solid #e6e9ef;
    border-top: 0;
    padding-left: 10px;
    line-height: 40px;
    }
    .graybtn {
    background: #bbb;
    color: #fff;
    border-bottom: 2px solid #bbb;
}
    .receive {
    font-size: 12px;
    width: 220px;
    height: 24px;
    line-height: 20px;
    text-align: right;
    strong {
    color: #f74a4a;
    padding-right: 6px;
    font-weight: normal;
}
}
    .imgtip {
    width: 220px;
    height: 30px;
    overflow: hidden;
    font-size: 14px;
    color: #3a3f4a;
    text-align: center;
    border: 1px solid #e6e9ef;
    border-top: 0;
    }
    .imginfo {
    width: 210px;
    height: 38px;
    overflow: hidden;
    font-size: 14px;
    color: #3a3f4a;
    text-align: left;
    border: 1px solid #e6e9ef;
    border-top: 0;
    padding-left: 10px;
    line-height: 40px;
    strong {
    color: #f74a4a;
    font-size: 14px;
    padding-right: 6px;
}
}
    }
    dt {
    text-align: center;
    width: 220px;
    height: 78px;
    border: 1px solid #e6e9ef;
    border-bottom: 0;
    padding-top: 35px;
    }
    dd {
    text-align: center;
  }
      .tqico {
        width: 90px;
        height: 80px;
        background: url(//js02.daoju.qq.com/common/images/mall/xyicon.png) no-repeat;
        display: block;
        margin: 0 auto;
    }
    .weekly {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 50px;
    width: 50px;
    background-position: -236px -9px;
    z-index: 5;
  }
  .month {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 50px;
    width: 50px;
    background-position: -304px -9px;
    z-index: 5;
  }
  .twentyg {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 50px;
    width: 50px;
    background-position: -376px -9px;
    z-index: 5;
  }
 .fortyg {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 50px;
    width: 50px;
    background-position: -445px -9px;
    z-index: 5;
    }
   .sixthg {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 50px;
    width: 50px;
    background-position: -514px -9px;
    z-index: 5;
    }
   .yuan30 {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 50px;
    width: 50px;
    background-position: -237px -88px;
    z-index: 5;
    }
    .yuan80 {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 50px;
    width: 50px;
    background-position: -307px -88px;
    z-index: 5;
  }
 .yuan1000 {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 50px;
    width: 50px;
    background-position: -445px -88px;
    z-index: 5;
  }
  .yuan200 {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 50px;
    width: 50px;
    background-position: -376px -88px;
    z-index: 5;
}
    }
    }
      }
}
</style>
